<template>
  <div style="padding-top:80px" class="dlbox">
    <!-- 搜索框开始 -->
    <div class="boxtop">
      <div class="top11">
      <!--订单编号 -->
        <div class="ddan">
          <div class="ttex"><i class="texxt">订单编号：</i></div>
          <div class="inp">
            <el-input v-model="searchinfo.orderNo" placeholder="请输入内容"></el-input>
          </div>
        </div>
      <!-- 选择日期 -->
        <div class="ttimt">
         <div class="ttex2"><i class="texxt2">选择日期:</i></div>
         <!-- 时间框 -->
         <div class="inp2">
           <div class="block">
    <!-- <span class="demonstration">选择日期</span> -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      unlink-panels
      @change="change"
      value-format="yyyy-MM-dd"
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
         </div>
        </div>
      <!--查询 -->
       <div class="ccxun">
       <el-button type="primary" icon="el-icon-search" @click="getlists">查询</el-button>
       </div>
      </div>
    </div>
    <!-- 搜索结束 -->
    <!-- 表单开始 -->
    <div class="boxbig">
      <el-table
    :data="list"
    stripe
    style="width:1290px padding:10px"   >
    <el-table-column type="index"  label="序号" width="80">
    </el-table-column>
    <el-table-column  prop="orderNo"  label="订单编号"  min-width="140">
    </el-table-column>
    <el-table-column  prop="skuName"  label="商品名称" width="140">
    </el-table-column>
    <el-table-column  prop="price"  label="订单金额(元)" width="140">
    </el-table-column>
    <el-table-column  prop="innerCode"  label="设备编号" width="140">
    </el-table-column>
    <el-table-column  prop="status"  label="订单状态" width="140">
    </el-table-column>
    <el-table-column  prop="createTime"  label="订单日期" width="140">
    </el-table-column>
    <el-table-column  prop="address"  label="操作" >
     <el-button type="text" @click="dialogVisible = true">查看详情</el-button>
    </el-table-column>
  </el-table>
    <div class="bytt" style="display:flex ;justify-content:flex-end">
    <button @click="DLss" style=" width:90px;background-Color:#d5ddf8  ;height: 30px;">上一页</button>
    <button @click="DLxx" style=" width:90px;background-Color:#d5ddf8  ;height: 30px;">下一页</button>
    </div>
  <el-dialog
  title="订单详情"
  :visible.sync="dialogVisible"
   width="630px"
   style="height='366px'"
  :before-close="handleClose" append-to-body
  class="ttk">

  <div class="kky1" style="display: flex; justify-content: space-between;" width="500px">
    <img class="dltp" src="" alt="">
    <span class="chcg">出货成功</span>
    <img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="">
  </div>
  <div class="taaop" style="margin-top: 25px; display: flex; justify-content: space-between;">
  <div class="lift">
   <i>订单编号：</i>
   <span>0100000214059152538757399</span>
  </div>
  <div class="right">
   <i>商品名称：</i>
   <span>A酷儿橙汁  1.5L</span>
  </div>
  </div>
  <div class="taaop1" style="margin-top: 25px; display: flex; justify-content: space-between;">
    <div class="lift1">
      <i>订单编号：</i>
      <span>01000002</span>
    </div>
    <div class="right1">
      <i>订单金额：</i>
      <span>0.13</span>
    </div>
  </div>
  <div class="taaop2" style="margin-top: 25px; display: flex; justify-content: space-between;">
    <div class="lift2">
      <i>完成时间：</i>
      <span>2022.11.29 20:00:04</span>
    </div>
    <div class="right2">
      <i>创建时间：</i>
      <span>2022.11.29 20:00:04</span>
    </div>
  </div>
  <div class="taaop3" style="margin-top: 25px; display: flex; justify-content: space-between;">
    <div class="lift3">
      <i>设备地址：</i>
      <span>凯德MALL一层西门入口右侧</span>
    </div>
    <div class="right3">
      <i>支付方式：</i>
      <span>微信支付</span>
    </div>
  </div>
</el-dialog>
    </div>

  </div>
</template>

<script>
import { getlists } from '@/api/management'
export default {
  async created () {
    const { data } = await getlists()
    this.list = data.currentPageRecords
    console.log(data)
  },
  data () {
    return {
      value1: [],
      input: '',
      dialogVisible: false,
      searchinfo: {
        pageIndex: 1,
        pageSize: 10,
        orderNo: '',
        startDate: '',
        endDate: ''
      },
      list: []
    }
  },
  methods: {

    DLss () {
      this.searchinfo.pageIndex--
      this.getlists()
    },
    DLxx () {
      this.searchinfo.pageIndex++
      this.getlists()
    },

    change () {
      this.searchinfo.startDate = this.value1[0]
      this.searchinfo.endDate = this.value1[1]
    },
    async getlists () {
      const { data } = await getlists(this.searchinfo)
      console.log(data)
      this.list = data.currentPageRecords
      this.searchinfo.pageIndex = data.pageIndex
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="less" scoped>
.dlbox{

  width: 100%;
  height: 100vh;
  // background-color: aquamarine;
.boxtop{
  width: 100%;
  height: 64px;
  padding: 20px;
  // background-color: bisque;
  .top11{
    display: flex;
    justify-content: space-between;
    width: 807.48px;
    height: 36.8px;
    margin-top: -6px;
    // background-color: pink;
    .ddan{
      display: flex;
      width: 276.44px;
      height: 36px;
      .ttex{
        width: 71.04px;
        height: 36px;
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
        .texxt{
        font-size: 14px;
        color: #606266;;
        }
      }
      .inp{
        width: 205px;
        height: 36px;
        background-color: yellowgreen;
      }
    }
    .ttimt{
      display: flex;
      width: 421.04px;
      height: 36px;
      // background-color: chocolate;
      .ttex2{
        width: 71px;
        height: 36px;
        margin-top: 7px;
        .texxt2{
          font-size: 14px;
          color: #606266;
        }
      }
      .inp2{
        width: 350px;
        height: 36px;
        // background-color: violet;
      }
    }
    .ccxun{
      width: 80px;
      height: 36px;
      // background-color: violet;
    }
  }
}
.boxbig{
  width: 100%;
  height: 617px;
  margin-top: 20px;
 padding: 20px;
  // background-color: brown;
}
.el-dialog__body {
  display: flex;
  width: 590px;
  height: 54px;
  // background-color:pink ;
}
.chcg{
  width: 200px;
}
.taaop{
  width: 195px;
  height: 72px;
  // background-color: aquamarine;
}
// 表单样式
.kky1 {
  width:590px !important;
  height: 54px !important;
}
.dltp{
  width: 26px;
  height: 26px;

}
.bytt{
  width: 100%;
  height: 30px;
  display: flex;
  // margin-left: 1200px;
  // background-color: aquamarine;
}
}
</style>
